<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Now: {{ now() }} </p>
</div>
<ul id="example-2">
    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
</ul>
<div id="todo-list-example">
    <input v-model="newTodoText"
        v-on:keyup.enter="addNewTodo"
        placeholder="Add a todo"/>
    <ul>
        <li is="todo-item"
            v-for="(todo, index) in todos"
            v-bind:title="todo"
            v-on:remove="todos.splice(index, 1)">
        </li>
    </ul>
</div>
<div id="app3">
    <ul>
        <li v-for="n in evenNumbers">{{ n }}</li>
    </ul>
</div>
<div id="app4">
    <button v-on:click="counter += 1">add 1</button>
    <p>this button is on clicked {{ counter }} </p>
</div>
<div id="app5">
    <button v-on:click="greet">Greet</button>
</div>
<div id="app6">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
    <button v-on:click="warn('Form cannot be submitted ye',$event)">Submit</button>
</div>
<div id="app7">
    <input v-model="message" placeholder="edit me"/>
    <p>Message is: {{ message }}</p>
    <span>Mutiline message is:</span>
    <p style="white-space: pre">{{ textArea }}</p>
    <br/>
    <textarea v-model="textArea" placeholder="add multiple lines"></textarea>
    <input type="checkbox" id="checkbox" v-model="checked"/>
    <label for="checkbox">{{ checked }}</label>
    <br/>
    <input type="checkbox" id="jack1" value="Jack1" v-model="checkedNames"/>
    <label for="jack1">Jack1</label>
    <input type="checkbox" id="jack2" value="Jack2" v-model="checkedNames"/>
    <label for="jack2">Jack2</label>
    <input type="checkbox" id="jack3" value="Jack3" v-model="checkedNames"/>
    <label for="jack3">Jack3</label>
    <br/>
    <span>Checked names: {{ checkedNames }}</span>
    <br/>
    <input type="radio" id="one" value="One" v-model="picked"/>
    <label for="one">One</label>
    <br/>
    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
    <br/>
    <span>Picked: {{ picked }}</span>
    <br/>
    <select v-model="selected">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
    <br/>
    <select v-model="selected2" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected2 }}</span>
    <br/>
    <select v-model="selected3">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected3 }}</span>
</div>
<script type="text/javascript">
    var app7 = new Vue({
        el:'#app7',
        data:{
            message:'',
            textArea:'',
            checked: false,
            checkedNames: [],
            picked:'',
            selected:'',
            selected2:[],
            selected3: 'A',
            options: [
                {text: "One", value: "A"},
                {text: "Two", value: "B"},
                {text: "Three", value: "C"}
            ]
        }
    });
    var app6 = new Vue({
        el:'#app6',
        methods:{
            say:function(message){
                alert(message);
            },
            warn:function(message, event){
                if(event) event.preventDefault();
                alert(message);
            }
        }
    });
    var app5 = new Vue({
        el: '#app5',
        data: {
            name: 'Vue.js"'
        },
        methods:  {
            greet: function(event){
                alert('Hello ' + this.name + '!');
                alert(event.target.tagName);
            }
        }
    });
    var app4 = new Vue({
       el: '#app4',
        data: {
            counter: 0
        }
    });
    new Vue({
        el:'#app3',
        data:{
            numbers: [1,2,3,4,5]
        },
        computed: {
            evenNumbers: function(){
                return this.numbers.filter(function(number){
                    return number % 2 === 0;
                })
            }
        }
    });
    Vue.component('todo-item', {
        template: '\
                <li>\
                  {{ title }}\
                  <button v-on:click="$emit(\'remove\')">X</button>\
                </li>\
              ',
        props: ['title']
    });
    new Vue({
        el: '#todo-list-example',
        data: {
            newTodoText: '',
            todos: [
                'Do the dishes',
                'Take out the trash',
                'Mow the lawn'
            ]
        },
        methods: {
            addNewTodo: function () {
                this.todos.push(this.newTodoText)
                this.newTodoText = ''
            }
        }
    });
    var example2 = new Vue({
       el: '#example-2',
       data:{
           parentMessage: 'Parent',
           items:[
               { message: 'Foo' },
               { message: 'Bar' }
           ]
       }
    });
    var vm2 = new Vue({
       el: "#example",
        data: {
            message: 'Hello'
        },
        computed: {
            reversedMessage: function(){
                return this.message.split('').reverse().join('');
            }
//            now:function(){
//                return Date.now();
//            }
        },
        methods: {
            now: function(){
                return Date.now();
            }
        }
    });

    console.log(vm2.reversedMessage);
    vm2.message = 'GoodBye';
    console.log(vm2.reversedMessage);

    var data = {a:1};
    var vm = new Vue({
        data: data,
        created: function(){
            console.log('a is: ' + this.a);
        }
    });

    console.log(vm.a === data.a);

    vm.a = 2
    console.log(data.a);

    vm.$watch('a', function(newVal, oldval){
        console.log("oldVal:" + oldval);
    });

    data.a = 3;
    console.log(vm.a);
</script>

</body>
</html>